<template>
  <div>
    <h1>App</h1>
    <p>count:{{ count }}</p>
    <button @click="increment">累加count</button>
    <button @click="incrementN({ n: 2 })">累加N count</button>
    <button @click="decrement">累减count</button>
    <button @click="incrementWait">等两秒再累加count</button>
    <button @click="incrementNWait(5)">等两秒累加N count</button>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
  name: 'App',
  mounted() {
    console.log(this, 'app');
  },
  computed: {
    ...mapState(['count', 'num']),
  },
  methods: {
    ...mapMutations(['increment', 'decrement', 'incrementN']),
    // incrementWait() {
    //   this.$store.dispatch('incrementWait');
    // },
    // incrementNWait(n) {
    //   this.$store.dispatch('incrementNWait', n);
    // },
    ...mapActions(['incrementWait', 'incrementNWait']),
  },
};
</script>
<style></style>
